<template>
	<div style="width: 100%; height: 100%; overflow: hidden; position: relative">
		<div v-if="that.container.auxiliaryLine.isOpen && that.container.auxiliaryLine.isShowXLine" class="auxiliary-line-x" :style="{ top: that.auxiliaryLinePos.y + 'px' }"></div>
		<div v-if="that.container.auxiliaryLine.isOpen && that.container.auxiliaryLine.isShowYLine" class="auxiliary-line-y" :style="{ left: that.auxiliaryLinePos.x + 'px' }"></div>
		<div
			id="flowContainer"
			class="flow-container"
			:class="{
				grid: that.flowData.config.showGrid,
				zoomIn: prop.currentTool.type == 'zoom-in',
				zoomOut: prop.currentTool.type == 'zoom-out',
				canScale: that.container.scaleFlag,
				canDrag: that.container.dragFlag,
				canMultiple: that.rectangleMultiple.flag,
			}"
			:style="{
				top: that.container.pos.top + 'px',
				left: that.container.pos.left + 'px',
				transform: 'scale(' + that.container.scale + ')',
				transformOrigin: that.container.scaleOrigin.x + 'px ' + that.container.scaleOrigin.y + 'px',
			}"
			@click.stop="containerHandler"
			@mousedown="mousedownHandler"
			@mousemove="mousemoveHandler"
			@mouseup="mouseupHandler"
			@mousewheel="scaleContainer"
			@DOMMouseScroll="scaleContainer"
			@contextmenu="showContainerContextMenu"
		>
			<flow-node
				v-for="(node, index) in flowData.nodeList"
				:key="index"
				:node="node"
				:plumb="plumb"
				:select="that.currentSelect"
				:selectGroup="that.currentSelectGroup"
				:currentTool="prop.currentTool"
				@updateSelect="updateSelect"
				@showNodeContextMenu="showNodeContextMenu"
				@isMultiple="isMultiple"
				@updateNodePos="updateNodePos"
				@alignForLine="alignForLine"
				@hideAlignLine="hideAlignLine"
				:thatNeedShow="prop.thatNeedShow"
			>
			</flow-node>
			<div
				class="rectangle-multiple"
				v-if="that.rectangleMultiple.flag && that.rectangleMultiple.multipling"
				:style="{
					top: that.rectangleMultiple.position.top + 'px',
					left: that.rectangleMultiple.position.left + 'px',
					width: that.rectangleMultiple.width + 'px',
					height: that.rectangleMultiple.height + 'px',
				}"
			></div>
		</div>
		<div class="container-scale">{{ $t('suo-fang-bei-shu-thatcontainerscaleshow', [that.container.scaleShow]) }}</div>
		<div class="mouse-position">{{ $t('x-that-mouse-position-x-y-that-mouse-position-y', [that.mouse.position.x, that.mouse.position.y]) }}</div>
		<!-- <vue-context-menu
      :contextMenuData="that.containerContextMenuData"
      @flowInfo="flowInfo"
      @paste="paste"
      @selectAll="selectAll"
      @saveFlow="saveFlow"
      @verticaLeft="verticaLeft"
      @verticalCenter="verticalCenter"
      @verticalRight="verticalRight"
      @levelUp="levelUp"
      @levelCenter="levelCenter"
      @levelDown="levelDown"
      @addRemark="addRemark"
    >
    </vue-context-menu>
    <vue-context-menu
      :contextMenuData="that.nodeContextMenuData"
      @copyNode="copyNode"
      @deleteNode="deleteNode"
    >
    </vue-context-menu> -->
	</div>
</template>

<script setup>
import { reactive, ref, computed, watch, onMounted, onBeforeUnmount, defineEmits, defineProps, nextTick } from 'vue';
import jsplumb from 'jsplumb';
import $ from 'jquery';
import { flowConfig } from '../config/args-config.js';
import { ZFSN } from '../util/ZFSN.js';
import FlowNode from './FlowNode.vue';
import useCurrentInstance from '/@/utils/hook/useCurrentInstance';
const { proxy } = useCurrentInstance();
const $t = proxy.$t;
const prop = defineProps({
	browserType: {
		type: Number,
		default: false,
	},
	flowData: {
		type: Object,
		default: false,
	},
	plumb: {
		type: Object,
		default: false,
	},
	select: {
		type: Object,
		default: false,
	},
	selectGroup: {
		type: Object,
		default: false,
	},
	currentTool: {
		type: Object,
		default: false,
	},
	thatNeedShow: {
		type: Boolean,
		default: false,
	},
});

onMounted(() => {
	initFlowArea();
});

const that = reactive({
	ctx: null,
	currentSelect: prop.select,
	flowData: prop.flowData,
	currentSelectGroup: prop.selectGroup,
	container: {
		pos: {
			top: -500,
			left: -500,
		},
		dragFlag: false,
		draging: false,
		scale: flowConfig.defaultStyle.containerScale.init,
		scaleFlag: false,
		scaleOrigin: {
			x: 0,
			y: 0,
		},
		scaleShow: ZFSN.mul(flowConfig.defaultStyle.containerScale.init, 100),
		auxiliaryLine: {
			isOpen: flowConfig.defaultStyle.isOpenAuxiliaryLine,
			isShowXLine: false,
			isShowYLine: false,
			controlFnTimesFlag: true,
		},
	},
	auxiliaryLinePos: {
		x: 0,
		y: 0,
	},
	mouse: {
		position: {
			x: 0,
			y: 0,
		},
		tempPos: {
			x: 0,
			y: 0,
		},
	},
	rectangleMultiple: {
		flag: false,
		multipling: false,
		position: {
			top: 0,
			left: 0,
		},
		height: 0,
		width: 0,
	},
	containerContextMenuData: flowConfig.contextMenu.container,
	nodeContextMenuData: flowConfig.contextMenu.node,
	tempLinkId: '',
	clipboard: [],
	plumb: {},
});

const updateSelect = ($event) => {
	that.currentSelect = $event;
};

const initFlowArea = () => {
	nextTick(() => {
		that.plumb = prop.plumb;

		that.ctx = document.getElementById('flowContainer').parentNode;
		$(document).ready(function () {
			$('.flow-container').droppable({
				accept: function (t) {
					if (t[0].className.indexOf('node-item') != -1) {
						let event = window.event || 'firefox';
						if (that.ctx.contains(event.srcElement) || event == 'firefox') {
							return true;
						}
					}
					return false;
				},
				hoverClass: 'flow-container-active',
				drop: function (event, ui) {
					let belongto = ui.draggable.attr('belongto');
					let type = ui.draggable.attr('type');

					emits('selectTool', 'drag');
					emits('findNodeConfig', belongto, type, (node) => {
						if (!node) {
							// that.$message.error("未知的节点类型！");
							console.log('未知的节点类型！');
							return;
						}
						addNewNode(node);
					});
				},
			});
		});
	});
};

const mousedownHandler = (e) => {
	let event = window.event || e;

	if (event.button == 0) {
		if (that.container.dragFlag) {
			that.mouse.tempPos = that.mouse.position;
			that.container.draging = true;
		}

		that.currentSelectGroup = [];
		if (that.rectangleMultiple.flag) {
			that.mouse.tempPos = that.mouse.position;
			that.rectangleMultiple.multipling = true;
		}
	}
};
const mousemoveHandler = (e) => {
	let event = window.event || e;

	if (event.target.id == 'flowContainer') {
		that.mouse.position = {
			x: event.offsetX,
			y: event.offsetY,
		};
	} else {
		let cn = event.target.className;
		let tn = event.target.tagName;
		if (cn != 'lane-text' && cn != 'lane-text-div' && tn != 'svg' && tn != 'path' && tn != 'I') {
			that.mouse.position.x = event.target.offsetLeft + event.offsetX;
			that.mouse.position.y = event.target.offsetTop + event.offsetY;
		}
	}
	if (that.container.draging) {
		let nTop = that.container.pos.top + (that.mouse.position.y - that.mouse.tempPos.y);
		let nLeft = that.container.pos.left + (that.mouse.position.x - that.mouse.tempPos.x);
		if (nTop >= 0) nTop = 0;
		if (nLeft >= 0) nLeft = 0;
		that.container.pos = {
			top: nTop,
			left: nLeft,
		};
	}
	if (that.rectangleMultiple.multipling) {
		let h = that.mouse.position.y - that.mouse.tempPos.y;
		let w = that.mouse.position.x - that.mouse.tempPos.x;
		let t = that.mouse.tempPos.y;
		let l = that.mouse.tempPos.x;
		if (h >= 0 && w < 0) {
			w = -w;
			l -= w;
		} else if (h < 0 && w >= 0) {
			h = -h;
			t -= h;
		} else if (h < 0 && w < 0) {
			h = -h;
			w = -w;
			t -= h;
			l -= w;
		}
		that.rectangleMultiple.height = h;
		that.rectangleMultiple.width = w;
		that.rectangleMultiple.position.top = t;
		that.rectangleMultiple.position.left = l;
	}
};
const mouseupHandler = () => {
	if (that.container.draging) that.container.draging = false;
	if (that.rectangleMultiple.multipling) {
		judgeSelectedNode();
		that.rectangleMultiple.multipling = false;
		that.rectangleMultiple.width = 0;
		that.rectangleMultiple.height = 0;
	}
};

const judgeSelectedNode = () => {
	let ay = that.rectangleMultiple.position.top;
	let ax = that.rectangleMultiple.position.left;
	let by = ay + that.rectangleMultiple.height;
	let bx = ax + that.rectangleMultiple.width;
	let nodeList = that.flowData.nodeList;
	nodeList.forEach(function (node, index) {
		if (node.y >= ay && node.x >= ax && node.y <= by && node.x <= bx) {
			prop.plumb.addToDragSelection(node.id);
			that.currentSelectGroup.push(node);
		}
	});
};
const scaleContainer = (e) => {
	let event = window.event || e;
	if (that.container.scaleFlag) {
		if (that.browserType == 2) {
			if (event.detail < 0) {
				enlargeContainer();
			} else {
				narrowContainer();
			}
		} else {
			if (event.deltaY < 0) {
				enlargeContainer();
			} else if (that.container.scale) {
				narrowContainer();
			}
		}
	}
};
const enlargeContainer = () => {
	that.container.scaleOrigin.x = that.mouse.position.x;
	that.container.scaleOrigin.y = that.mouse.position.y;
	let newScale = ZFSN.add(that.container.scale, flowConfig.defaultStyle.containerScale.onceEnlarge);
	if (newScale <= flowConfig.defaultStyle.containerScale.max) {
		that.container.scale = newScale;
		that.container.scaleShow = ZFSN.mul(that.container.scale, 100);
		prop.plumb.setZoom(that.container.scale);
	}
};
const narrowContainer = () => {
	that.container.scaleOrigin.x = that.mouse.position.x;
	that.container.scaleOrigin.y = that.mouse.position.y;
	let newScale = ZFSN.sub(that.container.scale, flowConfig.defaultStyle.containerScale.onceNarrow);
	if (newScale >= flowConfig.defaultStyle.containerScale.min) {
		that.container.scale = newScale;
		that.container.scaleShow = ZFSN.mul(that.container.scale, 100);
		prop.plumb.setZoom(that.container.scale);
	}
};

const showContainerContextMenu = (e) => {
	let event = window.event || e;
	event.preventDefault();
	$('.vue-contextmenuName-node-menu').css('display', 'none');
	$('.vue-contextmenuName-link-menu').css('display', 'none');
	selectContainer();
	let x = event.clientX;
	let y = event.clientY;
	that.containerContextMenuData.axis = { x, y };
};

const showNodeContextMenu = (e) => {
	let event = window.event || e;

	event.preventDefault();
	$('.vue-contextmenuName-flow-menu').css('display', 'none');
	$('.vue-contextmenuName-link-menu').css('display', 'none');
	let x = event.clientX;
	let y = event.clientY;
	that.nodeContextMenuData.axis = { x, y };
};
const flowInfo = () => {
	let nodeList = that.flowData.nodeList;
	let linkList = that.flowData.linkList;
	alert($t('dang-qian-liu-cheng-tu-zhong-you') + nodeList.length + $t('ge-jie-dian-you') + linkList.length + $t('tiao-lian-xian'));
};
const paste = () => {
	let dis = 0;
	that.clipboard.forEach(function (node, index) {
		let newNode = Object.assign({}, node);
		newNode.id = newNode.type + '-' + ZFSN.getId();
		let nodePos = computeNodePos(that.mouse.position.x + dis, that.mouse.position.y + dis);
		newNode.x = nodePos.x;
		newNode.y = nodePos.y;
		dis += 20;
		that.flowData.nodeList.push(newNode);
	});
};

const selectAll = () => {
	that.flowData.nodeList.forEach(function (node, index) {
		prop.plumb.addToDragSelection(node.id);
		that.currentSelectGroup.push(node);
	});
};
const saveFlow = () => {
	emits('saveFlow');
};
const checkAlign = () => {
	if (that.currentSelectGroup.length < 2) {
		// that.$message.error("请选择至少两个节点！");
		console.log('请选择至少两个节点！');
		return false;
	}
	return true;
};
const verticaLeft = () => {
	if (!checkAlign()) return;
	let nodeList = that.flowData.nodeList;
	let selectGroup = that.currentSelectGroup;
	let baseX = selectGroup[0].x;
	let baseY = selectGroup[0].y;
	for (let i = 1; i < selectGroup.length; i++) {
		baseY = baseY + selectGroup[i - 1].height + flowConfig.defaultStyle.alignSpacing.vertical;
		let f = nodeList.filter((n) => n.id == selectGroup[i].id)[0];
		f.tx = baseX;
		f.ty = baseY;
		prop.plumb.animate(
			selectGroup[i].id,
			{ top: baseY, left: baseX },
			{
				duration: flowConfig.defaultStyle.alignDuration,
				complete: function () {
					f.x = f.tx;
					f.y = f.ty;
				},
			}
		);
	}
};

const verticalCenter = () => {
	if (!checkAlign()) return;
	let nodeList = that.flowData.nodeList;
	let selectGroup = that.currentSelectGroup;
	let baseX = selectGroup[0].x;
	let baseY = selectGroup[0].y;
	let firstX = baseX;
	for (let i = 1; i < selectGroup.length; i++) {
		baseY = baseY + selectGroup[i - 1].height + flowConfig.defaultStyle.alignSpacing.vertical;
		baseX = firstX + ZFSN.div(selectGroup[0].width, 2) - ZFSN.div(selectGroup[i].width, 2);
		let f = nodeList.filter((n) => n.id == selectGroup[i].id)[0];
		f.tx = baseX;
		f.ty = baseY;
		prop.plumb.animate(
			selectGroup[i].id,
			{ top: baseY, left: baseX },
			{
				duration: flowConfig.defaultStyle.alignDuration,
				complete: function () {
					f.x = f.tx;
					f.y = f.ty;
				},
			}
		);
	}
};

const verticalRight = () => {
	if (!checkAlign()) return;
	let nodeList = that.flowData.nodeList;
	let selectGroup = that.currentSelectGroup;
	let baseX = selectGroup[0].x;
	let baseY = selectGroup[0].y;
	let firstX = baseX;
	for (let i = 1; i < selectGroup.length; i++) {
		baseY = baseY + selectGroup[i - 1].height + flowConfig.defaultStyle.alignSpacing.vertical;
		baseX = firstX + selectGroup[0].width - selectGroup[i].width;
		let f = nodeList.filter((n) => n.id == selectGroup[i].id)[0];
		f.tx = baseX;
		f.ty = baseY;
		prop.plumb.animate(
			selectGroup[i].id,
			{ top: baseY, left: baseX },
			{
				duration: flowConfig.defaultStyle.alignDuration,
				complete: function () {
					f.x = f.tx;
					f.y = f.ty;
				},
			}
		);
	}
};
const levelUp = () => {
	if (!checkAlign()) return;
	let nodeList = that.flowData.nodeList;
	let selectGroup = that.currentSelectGroup;
	let baseX = selectGroup[0].x;
	let baseY = selectGroup[0].y;
	for (let i = 1; i < selectGroup.length; i++) {
		baseX = baseX + selectGroup[i - 1].width + flowConfig.defaultStyle.alignSpacing.level;
		let f = nodeList.filter((n) => n.id == selectGroup[i].id)[0];
		f.tx = baseX;
		f.ty = baseY;
		prop.plumb.animate(
			selectGroup[i].id,
			{ top: baseY, left: baseX },
			{
				duration: flowConfig.defaultStyle.alignDuration,
				complete: function () {
					f.x = f.tx;
					f.y = f.ty;
				},
			}
		);
	}
};

const levelCenter = () => {
	if (!checkAlign()) return;
	let nodeList = that.flowData.nodeList;
	let selectGroup = that.currentSelectGroup;
	let baseX = selectGroup[0].x;
	let baseY = selectGroup[0].y;
	let firstY = baseY;
	for (let i = 1; i < selectGroup.length; i++) {
		baseY = firstY + ZFSN.div(selectGroup[0].height, 2) - ZFSN.div(selectGroup[i].height, 2);
		baseX = baseX + selectGroup[i - 1].width + flowConfig.defaultStyle.alignSpacing.level;
		let f = nodeList.filter((n) => n.id == selectGroup[i].id)[0];
		f.tx = baseX;
		f.ty = baseY;
		prop.plumb.animate(
			selectGroup[i].id,
			{ top: baseY, left: baseX },
			{
				duration: flowConfig.defaultStyle.alignDuration,
				complete: function () {
					f.x = f.tx;
					f.y = f.ty;
				},
			}
		);
	}
};
const levelDown = () => {
	if (!checkAlign()) return;
	let nodeList = that.flowData.nodeList;
	let selectGroup = that.currentSelectGroup;
	let baseX = selectGroup[0].x;
	let baseY = selectGroup[0].y;
	let firstY = baseY;
	for (let i = 1; i < selectGroup.length; i++) {
		baseY = firstY + selectGroup[0].height - selectGroup[i].height;
		baseX = baseX + selectGroup[i - 1].width + flowConfig.defaultStyle.alignSpacing.level;
		let f = nodeList.filter((n) => n.id == selectGroup[i].id)[0];
		f.tx = baseX;
		f.ty = baseY;
		prop.plumb.animate(
			selectGroup[i].id,
			{ top: baseY, left: baseX },
			{
				duration: flowConfig.defaultStyle.alignDuration,
				complete: function () {
					f.x = f.tx;
					f.y = f.ty;
				},
			}
		);
	}
};

const addRemark = () => {
	alert($t('tian-jia-bei-zhu-dai-wan-shan'));
};
const copyNode = () => {
	that.clipboard = [];
	if (that.currentSelectGroup.length > 0) {
		that.clipboard = Object.assign([], that.currentSelectGroup);
	} else if (that.currentSelect.id) {
		that.clipboard.push(that.currentSelect);
	}
};
const getConnectionsByNodeId = (nodeId) => {
	let conns1 = prop.plumb.getConnections({
		source: nodeId,
	});
	let conns2 = prop.plumb.getConnections({
		target: nodeId,
	});
	return conns1.concat(conns2);
};

const deleteNode = () => {
	let nodeList = that.flowData.nodeList;
	let linkList = that.flowData.linkList;
	let arr = [];
	arr.push(Object.assign({}, that.currentSelect));
	arr.forEach(function (c, index) {
		let conns = that.getConnectionsByNodeId(c.id);
		conns.forEach(function (conn, index) {
			linkList.splice(
				linkList.findIndex((link) => link.sourceId == conn.sourceId || link.targetId == conn.targetId),
				1
			);
		});
		prop.plumb.deleteEveryEndpoint();
		let inx = nodeList.findIndex((node) => node.id == c.id);
		nodeList.splice(inx, 1);
		nextTick(() => {
			linkList.forEach(function (link, index) {
				let conn = prop.plumb.connect({
					source: link.sourceId,
					target: link.targetId,
					anchor: flowConfig.jsPlumbConfig.anchor.default,
					connector: [
						link.cls.linkType,
						{
							gap: 5,
							cornerRadius: 8,
							alwaysRespectStubs: true,
						},
					],
					paintStyle: {
						stroke: link.cls.linkColor,
						strokeWidth: link.cls.linkThickness,
					},
				});
				if (link.label != '') {
					conn.setLabel({
						label: link.label,
						cssClass: 'linkLabel',
					});
				}
			});
		});
	});
	selectContainer();
};

const addNewNode = (node) => {
	let x = that.mouse.position.x;
	let y = that.mouse.position.y;
	let nodePos = computeNodePos(x, y);
	x = nodePos.x;
	y = nodePos.y;

	let newNode = Object.assign({}, node);
	newNode.id = newNode.type + '-' + ZFSN.getId();
	newNode.height = 50;
	if (newNode.type == 'start' || newNode.type == 'end' || newNode.type == 'event' || newNode.type == 'gateway') {
		newNode.x = x - 25;
		newNode.width = 50;
	} else {
		newNode.x = x - 60;
		newNode.width = 120;
	}
	newNode.y = y - 25;
	if (newNode.type == 'x-lane') {
		newNode.height = 200;
		newNode.width = 600;
	} else if (newNode.type == 'y-lane') {
		newNode.height = 600;
		newNode.width = 200;
	}
	that.flowData.nodeList.push(newNode);
};
const computeNodePos = (x, y) => {
	const pxx = flowConfig.defaultStyle.alignGridPX[0];
	const pxy = flowConfig.defaultStyle.alignGridPX[1];
	if (x % pxx) x = pxx - (x % pxx) + x;
	if (y % pxy) y = pxy - (y % pxy) + y;
	return {
		x: x,
		y: y,
	};
};

const containerHandler = () => {
	selectContainer();
	let toolType = prop.currentTool.type;
	if (toolType == 'zoom-in') {
		enlargeContainer();
	} else if (toolType == 'zoom-out') {
		narrowContainer();
	}
};

const selectContainer = () => {
	that.currentSelect = {};
	emits('getShortcut');
};

const isMultiple = (callback) => {
	callback(that.rectangleMultiple.flag);
};

const updateNodePos = () => {
	let nodeList = that.flowData.nodeList;
	that.currentSelectGroup.forEach(function (node, index) {
		let l = parseInt($('#' + node.id).css('left'));
		let t = parseInt($('#' + node.id).css('top'));
		let f = nodeList.filter((n) => n.id == node.id)[0];
		f.x = l;
		f.y = t;
	});
};

const alignForLine = (e) => {
	if (that.selectGroup.length > 1) return;
	if (that.container.auxiliaryLine.controlFnTimesFlag) {
		let elId = e.el.id;
		let nodeList = that.flowData.nodeList;
		nodeList.forEach(function (node, index) {
			if (elId != node.id) {
				let dis = flowConfig.defaultStyle.showAuxiliaryLineDistance,
					elPos = e.pos,
					elH = e.el.offsetHeight,
					elW = e.el.offsetWidth,
					disX = elPos[0] - node.x,
					disY = elPos[1] - node.y;
				if ((disX >= -dis && disX <= dis) || (disX + elW >= -dis && disX + elW <= dis)) {
					that.container.auxiliaryLine.isShowYLine = true;
					that.auxiliaryLinePos.x = node.x + that.container.pos.left;
					let nodeMidPointX = node.x + node.width / 2;
					if (nodeMidPointX == elPos[0] + elW / 2) {
						that.auxiliaryLinePos.x = nodeMidPointX + that.container.pos.left;
					}
				}
				if ((disY >= -dis && disY <= dis) || (disY + elH >= -dis && disY + elH <= dis)) {
					that.container.auxiliaryLine.isShowXLine = true;
					that.auxiliaryLinePos.y = node.y + that.container.pos.top;
					let nodeMidPointY = node.y + node.height / 2;
					if (nodeMidPointY == elPos[1] + elH / 2) {
						that.auxiliaryLinePos.y = nodeMidPointY + that.container.pos.left;
					}
				}
			}
		});
		that.container.auxiliaryLine.controlFnTimesFlag = false;
		setTimeout(function () {
			that.container.auxiliaryLine.controlFnTimesFlag = true;
		}, 200);
	}
};
const hideAlignLine = () => {
	if (that.container.auxiliaryLine.isOpen) {
		that.container.auxiliaryLine.isShowXLine = false;
		that.container.auxiliaryLine.isShowYLine = false;
	}
};
defineExpose({
	that,
});

const emits = defineEmits(['userName', 'updateSelectGroup', 'updateSelect', 'selectTool', 'findNodeConfig', 'saveFlow', 'getShortcut']);

watch(
	() => prop.select,
	(val) => {
		that.currentSelect = val;
		if (that.tempLinkId != '') {
			$('#' + that.tempLinkId).removeClass('link-active');
			that.tempLinkId = '';
		}
		if (that.currentSelect.type == 'link') {
			that.tempLinkId = that.currentSelect.id;
			$('#' + that.currentSelect.id).addClass('link-active');
		}
	}
);
watch(
	() => that.currentSelect,
	(newVal) => {
		emits('updateSelect', newVal);
	},
	{ deep: true }
);
watch(
	() => that.selectGroup,
	(newVal) => {
		that.currentSelectGroup = newVal;
	}
);
watch(
	() => that.currentSelectGroup,
	(newVal) => {
		emits('updatSelectGroup', newVal);
	},
	{ deep: true }
);
</script>

<style lang="scss" scope>
@import '../style/flow-area.scss';
// div{
// 	color: #777;
// }
</style>
